<template>
  <div class="dorder-apply">
    <el-form :model="orderForm" ref="orderForm" class="orderForm" :inline="true" size="mini">
      <el-form-item label="手机号">
        <el-input v-model="orderForm.telPhone" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="订单ID">
        <el-input v-model="orderForm.orderCode" placeholder="订单ID"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="orderForm.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="申请时间">
        <el-col :span="11">
          <el-form-item prop="startTime">
            <el-date-picker type="datetime" placeholder="选择日期" v-model="orderForm.startTime" default-time="00:00:00"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line center" :span="1">~</el-col>
        <el-col :span="11">
          <el-form-item prop="startTime">
            <el-date-picker type="datetime" placeholder="选择日期" v-model="orderForm.endTime" default-time="00:00:00"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="orderForm.status" placeholder="请选择" clearable>
          <el-option label="未激活" value="0">未激活</el-option>
          <el-option label="已失效" value="2">已失效</el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" size="small" @click="search()">搜索</el-button>
      <!--<el-button type="primary" size="small" >下载</el-button>-->
    </el-form>

    <el-table
      class="style-a"
      :data="tableData"
      size="small"
      border
      style="width:100%"
      v-loading.body="listLoading" element-loading-text="Loading">
      <el-table-column
        label="订单ID"
        align="center"
        prop="orderCode"
        min-width="80">
      </el-table-column>
      <el-table-column
        label="产品名称"
        align="center"
        prop="productName"
        min-width="80">
      </el-table-column>
      <el-table-column
        label="退单数量"
        align="center"
        prop="num"
        min-width="80">
      </el-table-column>
      <el-table-column
        label="手机号码"
        align="center"
        prop="telphone"
        min-width="80">
      </el-table-column>
      <el-table-column
        label="客人姓名"
        align="center"
        prop="name"
        width="80">
        <!--<template slot-scope="scope">-->
          <!--<a href="javascript:void(0);" @click="checkPicture(scope.row.id)">查看</a>-->
        <!--</template>-->
      </el-table-column>
      <el-table-column
        label="退单金额（元）"
        prop="refundAmount"
        align="center"
        min-width="80">
      </el-table-column>
      <el-table-column
        label="状态"
        prop="statusStr"
        align="center"
        min-width="80">
        <!--<template slot-scope="scope">-->
          <!--<p v-if="scope.row.status == 0">申请中</p>-->
          <!--<p v-else-if="scope.row.status == 1">已确认</p>-->
          <!--<p v-else>拒绝</p>-->
        <!--</template>-->
      </el-table-column>
      <el-table-column
        label="申请人"
        prop="cUStr"
        align="center"
        min-width="80">
      </el-table-column>
      <el-table-column
        label="申请时间"
        prop="cTStr"
        align="center"
        min-width="80">
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[20]"
      :page-size="20"
      layout="total, prev, pager, next, jumper"
      :total="totalSize">
    </el-pagination>
  </div>
</template>
<script>
  //  import { getOrderList, getOrderDetail, getOrderCode, getOrderStatus } from '@/api/orderList'
  import { getOrderApplyList } from '@/api/dOrderApply'
//  import { Message } from 'element-ui'
  export default {
    data() {
      return {
        listLoading: false,
        orderForm: {
          startTime: null,
          endTime: null,
          name: null,
          orderCode: null,
          status: null,
          telphone: null
        },
        tableData: [],
        currentPage: 1,
        totalSize: null
      }
    },
    created() {
      this.getTableList()
    },
    methods: {
      handleCurrentChange(val) {
        this.currentPage = val
        this.getTableList()
      },
      search() {
         this.currentPage = 1
         this.getTableList()
      },
      getTableList() {
        let params = {
           startTime: new Date(this.orderForm.startTime).getTime() || null,
           endTime: new Date(this.orderForm.endTime).getTime() || null,
           name: this.orderForm.name || null,
           orderCode: this.orderForm.orderCode || null,
           status: this.orderForm.status || null,
           telphone: this.orderForm.telPhone || null,
           pageSize: 20,
           pageNumber: this.currentPage
        }
        this.listLoading = true
        getOrderApplyList(params).then(res => {
          this.listLoading = false
          let data = res.data
          if (data.errorCode === 'E_000') {
             this.tableData = data.body.list
             this.totalSize = data.body.total
          }
        }).catch(() => {
          this.listLoading = false
        })
      }
    }
  }
</script>
<style lang="scss">
  .order-apply{

  }
</style>
